<template>
	<view class="container">
		<view class="header-wrapper">
			<view class="header-title">文字说明</view>
			<text class="header-text">
				本人郑重声明:本表所填的个人资料及所附的证明材料均真实有效,并充分了解上述资料的真实性是与公司订立劳动合同的前提条件，如有虚假或不实信息，属于严重违反公司规章制度，同意公司解除与本人的劳动合同，由本人承担一切法律责任。
			</text>
		</view>
		<!-- <image :src="imgSrc"></image> -->
		<view class="staff-form">
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">所属公司</text>
				</view>
				<!-- <view class="staff-inp">
				 <uni-icons
						type="folder-add" 
						size="22"
						color="#005AFF"
						class="company-icons disabled"
					>
					</uni-icons> 
					<input 
						class="inp-box disabled" 
						disabled 
						type="text" 
						v-model="formArgs.sub_comp"
					/> 
				</view> -->
				<view class="staff-inp">
					<uni-icons 
						type="folder-add" 
						size="22"
						color="#005AFF"
						class="company-icons"
					>
					</uni-icons>
					<picker 
						@change="companyPickerChange" 
						:value="companyIndex"
						 range-key="nickname"
						:range="companyArray"
						class="company-wrapper"
					>
						<view 
						  class="company-name"
						  v-if="companyArray[companyIndex]"
						>
							{{companyArray[companyIndex].nickname}}
						</view>
						<view
						  class="company-name"
						  v-if="!companyArray[companyIndex]"
						></view>
					</picker>
				</view> 
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text">分公司编号</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box disabled" 
						disabled 
						type="text"
						v-model="formArgs.branch_number"
					/>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text">分公司人员</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box disabled" 
						disabled 
						type="text"
						v-model="formArgs.branch_staff"
					/>
				</view>
			</view>
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">姓名</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.name"
					/>
				</view>
			</view>
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">身份证号码</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="idcard"
						v-model="formArgs.id_number"
					/>
					<!-- <view 
						class="card-btn" 
						hover-class="btn-click"
						@click="handleStanding"
					>
						<text class="btn-text-s">识别身份证</text>
						<text class="btn-text-t">(上传本人照片)</text> 
					</view> -->
				</view>
			</view>
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">身份证到期日期</text>
				</view>
				<view class="staff-inp">
					<uni-icons
						type="wallet" 
						size="22"
						color="#676767"
						class="company-icons"
					>
					</uni-icons>
					
					<picker 
						mode="date" 
						:value="expireIdCardDate" 
						@change="expireIdCardDateChange"
						class="company-wrapper"
					>
						<view class="company-name">{{expireIdCardDate}}</view>
					</picker>
					
				</view>
			</view>
			<view class="staff-item" style="width: 100%" v-show="formArgs.name && formArgs.id_number">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">人脸比对</text>
					<text class="title-text" v-if="!isPersonal" style="color: red; font-size: 24rpx;">(未通过)</text>
					<text class="title-text"  v-if="isPersonal"  style="color: green; font-size: 24rpx;">(已通过)</text>
				</view>
				<!--<view class="staff-inp">
					
					 <view 
						class="card-btn" 
						hover-class="btn-click"
						@click="handleStanding"
					>
						<text class="btn-text-s">识别身份证</text>
						<text class="btn-text-t">(上传本人照片)</text> 
					</view> 
				</view>-->
				<view class="center-btn" style="width: 100%;">
				<view
					class="card-btn" 
					hover-class="btn-click"
					@click="handleStanding"
				>
					<text class="btn-text-s">请上传本人照片</text>
					<text class="btn-text-t"></text> 
				</view> 
				</view>
			</view>
			
			
			
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">保安证号</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						placeholder="若没有则填无"
						placeholder-class="place-holder-s"
						v-model="formArgs.security_number"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">性别</text>
					</view>
					<view 
						class="staff-inp" 
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="sexPickerChange" 
							:value="sexIndex"
							 range-key="value"
							:range="sexArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="sexArray[sexIndex]"
							>
								{{sexArray[sexIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!sexArray[sexIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
				<view class="staff-item" >
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">民族</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nationPickerChange" 
							:value="nationIndex"
							 range-key="name"
							:range="nationData"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nationData[nationIndex]"
							>
								{{nationData[nationIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nationData[nationIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">出生日期</text>
				</view>
				<view class="staff-inp">
					<uni-icons
						type="wallet" 
						size="22"
						color="#676767"
						class="company-icons"
					>
					</uni-icons>
					
					<picker 
						mode="date" 
						:value="birthDate" 
						@change="birthDateChange"
						class="company-wrapper"
					>
						<view class="company-name">{{birthDate}}</view>
					</picker>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">年龄</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="number"
						 v-model="formArgs.age"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">身高</text>
					</view>
					<view 
						class="staff-inp" 
					>
						<input
							class="inp-box"  
							type="number" 
							v-model="formArgs.stature"
						/>
					</view>
				</view>
				<view class="staff-item" >
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">政治面貌</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="politicalPickerChange" 
							:value="politicalIndex"
							 range-key="value"
							:range="politicalArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="politicalArray[politicalIndex]"
							>
								{{politicalArray[politicalIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!politicalArray[politicalIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">婚姻状况</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="marriagePickerChange" 
							:value="marriageIndex"
							 range-key="value"
							:range="marriageArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="marriageArray[marriageIndex]"
							>
								{{marriageArray[marriageIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!marriageArray[marriageIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">籍贯</text>
					</view>
					<view 
						class="staff-inp" 
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nativeProvincePickerChange" 
							:value="nativeProvinceIndex"
							 range-key="name"
							:range="nativeProvinceArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nativeProvinceArray[nativeProvinceIndex]"
							>
								{{nativeProvinceArray[nativeProvinceIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nativeProvinceArray[nativeProvinceIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
				<view class="staff-item" >
					<view class="staff-item-title hide">
						<text class="title-text">籍贯</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nativeCityPickerChange" 
							:value="nativeCityIndex"
							 range-key="name"
							:range="nativeCityArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nativeCityArray[nativeCityIndex]"
							>
								{{nativeCityArray[nativeCityIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nativeCityArray[nativeCityIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">户籍地址</text>
					</view>
					<view 
						class="staff-inp" 
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="domicileProvincePickerChange" 
							:value="domicileProvinceIndex"
							 range-key="name"
							:range="domicileProvinceArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="domicileProvinceArray[domicileProvinceIndex]"
							>
								{{domicileProvinceArray[domicileProvinceIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!domicileProvinceArray[domicileProvinceIndex]"
							>  请选择省 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
				<view class="staff-item">
					<view class="staff-item-title hide">
						<text class="title-text">户籍地址</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="domicileCityPickerChange" 
							:value="domicileCityIndex"
							 range-key="name"
							:range="domicileCityArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="domicileCityArray[domicileCityIndex]"
							>
								{{domicileCityArray[domicileCityIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!domicileCityArray[domicileCityIndex]"
							>  请选择市 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1" style="margin-top: 20rpx;">
					
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="domicileDistrictPickerChange" 
							:value="domicileDistrictIndex"
							 range-key="name"
							:range="domicileDistrictArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="domicileDistrictArray[domicileDistrictIndex]"
							>
								{{domicileDistrictArray[domicileDistrictIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!domicileDistrictArray[domicileDistrictIndex]"
							>  请选择区 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item" style="margin-top: 20rpx">
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						placeholder="请输入详细地址(不用重复填写省市区)"
						placeholder-class="place-holder-s"
						v-model="formArgs.det_address"
					/>
				</view>
			</view>
			
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">现住址</text>
					</view>
					<view 
						class="staff-inp" 
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nowProvincePickerChange" 
							:value="nowProvinceIndex"
							 range-key="name"
							:range="nowProvinceArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nowProvinceArray[nowProvinceIndex]"
							>
								{{nowProvinceArray[nowProvinceIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nowProvinceArray[nowProvinceIndex]"
							>  请选择省 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
				<view class="staff-item">
					<view class="staff-item-title hide">
						<text class="title-text">户籍地址</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nowCityPickerChange" 
							:value="nowCityIndex"
							 range-key="name"
							:range="nowCityArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nowCityArray[nowCityIndex]"
							>
								{{nowCityArray[nowCityIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nowCityArray[nowCityIndex]"
							>  请选择市 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1" style="margin-top: 20rpx;">
					
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="nowDistrictPickerChange" 
							:value="nowDistrictIndex"
							 range-key="name"
							:range="nowDistrictArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="nowDistrictArray[nowDistrictIndex]"
							>
								{{nowDistrictArray[nowDistrictIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!nowDistrictArray[nowDistrictIndex]"
							>  请选择区 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item" style="margin-top: 20rpx">
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						placeholder="请输入详细地址(不用重复填写省市区)"
						placeholder-class="place-holder-s"
						v-model="formArgs.current"
					/>
				</view>
			</view>
			
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">家庭电话</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="number" 
						v-model="formArgs.home_phone"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">是否退伍</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="vetePickerChange" 
							:value="veteIndex"
							 range-key="value"
							:range="veteArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="veteArray[veteIndex]"
							>
								{{veteArray[veteIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!veteArray[veteIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">学历</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="educationPickerChange" 
							:value="educationIndex"
							 range-key="value"
							:range="educationArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="educationArray[educationIndex]"
							>
								{{educationArray[educationIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!educationArray[educationIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">专业</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.major"
					/>
				</view>
			</view>
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">毕业学校</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.school"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">外语水平</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="englishPickerChange" 
							:value="englishIndex"
							 range-key="value"
							:range="englishArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="englishArray[englishIndex]"
							>
								{{englishArray[englishIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!englishArray[englishIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item">
				<view class="staff-item-title">
					
					<text class="title-text ">技能等级</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.skill_rank"
					/>
				</view>
			</view>
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">家庭/个人病史情况</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.history"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">是否曾在本公司入职</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="workedPickerChange" 
							:value="workedIndex"
							 range-key="value"
							:range="workedArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="workedArray[workedIndex]"
							>
								{{workedArray[workedIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!workedArray[workedIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			
			<view class="staff-row" v-show="workedIndex === 1">
				<view class="staff-item">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">合同开始日期</text>
					</view>
					<view class="staff-inp">
						<uni-icons
							type="wallet" 
							size="22"
							color="#676767"
							class="company-icons"
						>
						</uni-icons>
						
						<picker 
							mode="date" 
							:value="isComWorkStartDate" 
							@change="comWorkStartDate"
							class="company-wrapper"
						>
							<view class="company-name">{{isComWorkStartDate}}</view>
						</picker>
						
					</view>
				</view>
				
				<view class="staff-item">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">合同结束日期</text>
					</view>
					<view class="staff-inp">
						<uni-icons
							type="wallet" 
							size="22"
							color="#676767"
							class="company-icons"
						>
						</uni-icons>
						
						<picker 
							mode="date" 
							:value="isComWorkEndDate" 
							@change="comWorkEndDate"
							class="company-wrapper"
						>
							<view class="company-name">{{isComWorkEndDate}}</view>
						</picker>
						
					</view>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">是否与其他单位解除劳动关系</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="freePickerChange" 
							:value="freeIndex"
							 range-key="value"
							:range="freeArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="freeArray[freeIndex]"
							>
								{{freeArray[freeIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!freeArray[freeIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">解除时间</text>
				</view>
				<view class="staff-inp">
					<uni-icons
						type="wallet" 
						size="22"
						color="#676767"
						class="company-icons"
					>
					</uni-icons>
					
					<picker 
						mode="date" 
						:value="secureDate" 
						@change="secureDateChange"
						class="company-wrapper"
					>
						<view class="company-name">{{secureDate}}</view>
					</picker>
					
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item flex-1">
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">员工签署合同类型</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="contractTypePickerChange" 
							:value="contractTypeIndex"
							 range-key="value"
							:range="contractTypeArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="contractTypeArray[contractTypeIndex]"
							>
								{{contractTypeArray[contractTypeIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!contractTypeArray[contractTypeIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-row">
				
				<view class="staff-item" >
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">入职部门</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="departmentPickerChange" 
							:value="departmentIndex"
							 range-key="name"
							:range="departmentArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="departmentArray[departmentIndex]"
							>
								{{departmentArray[departmentIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!departmentArray[departmentIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
				<view class="staff-item" >
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">职位</text>
					</view>
					<!-- <view 
						class="staff-inp" 
					>
						<input
							class="inp-box"  
							type="text" 
							v-model="formArgs.job_title"
						/>
					</view> -->
					<view
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="positionPickerChange" 
							:value="positionIndex"
							 range-key="name"
							:range="positionArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="positionArray[positionIndex]"
							>
								{{positionArray[positionIndex].name}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!positionArray[positionIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						护卫点
					</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.escort"
					/>
				</view>
			</view>
			
			<view class="staff-row">
				<view class="staff-item" > 
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">深圳紧急联系人姓名</text>
					</view>
					<view 
						class="staff-inp" 
					>
						<input
							class="inp-box"  
							type="text" 
							v-model="formArgs.contacts"
						/>
					</view>
				</view>
				<view class="staff-item" >
					<view class="staff-item-title">
						<text class="dot">*</text>
						<text class="title-text">与紧急联系人关系</text>
					</view>
					<view 
						class="staff-inp"
						style="padding-left: 20rpx; position: relative;"
					>
						<picker
							@change="relationPickerChange" 
							:value="relationIndex"
							 range-key="value"
							:range="relationArray"
							class="company-wrapper"
						>
							<view 
							  class="company-name"
							  v-if="relationArray[relationIndex]"
							>
								{{relationArray[relationIndex].value}}
							</view>
							<view
							  class="company-name-tip"
							  v-if="!relationArray[relationIndex]"
							>  请选择 </view>
						</picker>
						<uni-icons
							type="bottom" 
							size="22"
							color="#D0D0D0"
							class="bottom-icons"
						>
						</uni-icons>
					</view>
				</view>
			</view> 
			
			<view class="staff-item" style="margin-top: 20rpx;" v-show="relationIndex === 5">
				<view 
					class="staff-inp" 
				>
					<input
						class="inp-box"  
						type="text" 
						placeholder="请输入紧急联系人与本人关系"
						placeholder-class="place-holder-s"
						v-model="contacts_relation"
					/>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						深圳紧急联系人电话
					</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="number" 
						v-model="formArgs.contacts_phone"
					/>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						深圳紧急联系人工作单位
					</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.contacts_unit"
					/>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						深圳紧急联系人详细地址
					</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						v-model="formArgs.contacts_address"
					/>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text ">
						社保电脑号
					</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="text" 
						placeholder="深圳社保填写社保电脑号"
						placeholder-class="place-holder-s"
						v-model="formArgs.sscn"
					/>
				</view>
			</view>
			
			<!-- <view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text">医疗缴费档次</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box disabled" 
						disabled 
						type="number"
						placeholder="无需填写"
						placeholder-class="place-holder-s"
					/>
				</view>
			</view> -->
			
			<!-- <view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text">缴费工资</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box disabled" 
						disabled 
						type="number" 
						placeholder="无需填写"
						placeholder-class="place-holder-s"
					/>
				</view>
			</view> -->
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text">联系电话</text>
				</view>
				<view class="staff-inp">
					<input 
						class="inp-box"  
						type="number" 
						v-model="phone"
						placeholder="请输入手机验证码"
						placeholder-class="place-holder-s"
					/>
				</view>
				<view class="code-inp" style="margin-top: 20rpx;">
					<input
						class="inp-code-box"  
						type="number" 
						v-model="formArgs.captcha"
					/>
					<view 
						v-if="!isFetch"
						class="code-btn"
						hover-class="btn-click"
						@click="handleSendSmsCode"
					>
						点击发送
					</view>
					<view
						v-if="isFetch"
						class="code-btn code-btn-down"
					>
						{{num}}s
					</view>
				</view>
			</view>
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						身份证正面
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('cardFront')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="sfz_front">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{sfz_front}}</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="dot">*</text>
					<text class="title-text ">
						身份证反面
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('cardReverse')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="sfz_back">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{sfz_back}}</view>
				</view>
			</view>
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<!-- <text class="dot">*</text> -->
					<text class="title-text ">
						体检表
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('healthForm')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="health_form" v-for="i in health_form.split(',')">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text" >{{i}}</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<!-- <text class="dot">*</text> -->
					<text class="title-text ">
						户籍所在地公安机关出具的无犯罪记录证明
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('noCrime')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="no_crime_prove">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{no_crime_prove}}</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text ">
						保安员证
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('staffProve')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="staff_prove">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{staff_prove}}</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text ">
						学历证书
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('diploma')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="diploma">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{diploma}}</view>
				</view>
			</view>
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text ">
						退伍证
					</text>
				</view>
				<view class="staff-inp upload-bg" @click="handleChooseFile('permit')">
					请上传小于30MB的文件
				</view>
				<view class="annex-box" v-if="permit">
					<uni-icons class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view class="annex-text">{{permit}}</view>
				</view>
			</view>
			
			
			<view class="staff-item">
				<view class="staff-item-title">
					<text class="title-text ">
						其他证件
					</text>
				</view>
				
				<view class="staff-inp upload-bg" @click="handleToCert">
					点击添加
				</view>
				<view
					class="annex-box"
					 v-for="(item,index) in activeArgs"
					 :key="item.id"
				>
					<uni-icons v-if="item.url" class="annex-icon" color="#2D83FE" type="paperclip" size="20"></uni-icons>
					<view v-if="item.url" class="annex-text">{{item.url}}</view>
				</view>
			</view>
		
		</view>
		
		<view class="submit-btn-wrapper">
			<view 
				class="submit-btn" 
				@click="handleSubmit"
				hover-class="btn-click">
				提交
			</view>
		</view>
		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import Client from '@/common/client.ts'
	import { mapGetters,mapActions } from 'vuex'
	import config from '@/common/config.js'
	import WCompress from '@/components/w-compress/w-compress.vue'
	export default {
		name:"staff-info",
		components: {
		        WCompress
		},
		data() {
			return {
				phone: '',
				num: 60,
				timer: null,
				isFetch: !1,
				companyArray: [], //公司
				companyIndex: -1,
				sexIndex: -1,
				nationIndex: -1,
				expireIdCardDate: "", //身份证过期
				birthDate: "",        //出生
				politicalIndex: -1,
				marriageIndex: -1,
				nativeProvinceArray: [], //籍贯
				nativeProvinceIndex: -1,
				nativeCityArray: [],
				nativeCityIndex: -1,
				domicileProvinceArray: [], //户籍
				domicileProvinceIndex: -1,
				domicileCityArray: [],
				domicileCityIndex: -1,
				domicileDistrictArray: [],
				domicileDistrictIndex: -1,
				domicileAddress: "",
				nowProvinceArray: [],  //现住址
				nowProvinceIndex: -1,
				nowCityArray: [],
				nowCityIndex: -1,
				nowDistrictArray: [],
				nowDistrictIndex: -1,
				nowAddress: "",
				veteIndex: -1, //退伍
				educationIndex: -1,
				englishIndex: -1,
				workedIndex: -1, //是否曾在本公司工作
				isComWorkStartDate: "",
				isComWorkEndDate: "",
				freeIndex: -1,
				contractTypeIndex: -1,
				relationIndex: -1, //关系
				secureDate: "",
				departmentArray: [], //部门
				departmentIndex: -1, //部门
				positionArray: [], //职位
				positionIndex: -1,
				contacts_relation: '',
				//附件
				sfz_front: '',
				sfz_back: '',
				health_form: '', //体检表
				no_crime_prove: '', //无犯罪记录
				staff_prove: '', //保安员证
				diploma: '', //学历证书
				permit: '', //退伍证
				other_documents: '', //其它
				formArgs: {
					id_number: '', //身份证号 
					name: '',
					security_number: '',
					age: '',
					stature: '',
					det_address: '',
					current: '',
					home_phone: '',
					skill_rank: '',
					major: '',
					school: '',
					history: '',
					escort: '',
					contacts: '',
					contacts_phone: '',
					contacts_unit: '',
					contacts_address: '',
					sscn: '',
					captcha: ''	,
					branch_number: '',
					branch_staff: '',
					sub_comp_id: '',
				},
				staffArgs: {
					
				},

				isPersonal: false,
				
			};
		},
		computed: {
			...mapGetters(
				["nationData",
				 "sexArray",
				 "politicalArray",
				 "marriageArray",
				 "veteArray",
				 "educationArray",
				 "englishArray",
				 "workedArray",
				 "freeArray",
				 "contractTypeArray",
				 "relationArray",
				 "userInfo",
				 "activeArgs"
				]
			)
		},
		mounted () {
			console.log(this.$route.query,"mounted")
			this.fetchFamily()
			this.fetchAreaList()
			//console.log(this.$route.query)	
			
		},
		methods: {
			...mapActions('user',['setUserInfo']),
			...mapActions('certificate',['setActiveArgs']),
			//发送验证码
			async handleSendSmsCode () {
				if (!this.verify()) return 
				try {
					await this.$api.handleSendSMS({
						mobile: this.phone,
						event: 'register'
					})
					this.$utils.showToast("短信已发送至手机")
					this.handleCountDown()
				} catch(e) {
					console.log('TIP: handleSendSMS -> error',e)
				}	
				
			},
			handleCountDown () {
				clearInterval(this.timer)
				this.isFetch = true
				this.timer = setInterval(() => {
					this.num -= 1
					if (this.num === -1 ) {
						clearInterval(this.timer)
						this.num = 60
						this.isFetch = false
					}
				},1000)
			},
			verify () {
				const { phone } = this
				if (!this.$utils.verificatPhone(phone)) {
					 this.$utils.showToast("请输入正确手机号")
					 return false 
				}
				return true
			},
			//选择公司
			companyPickerChange (e) {
				console.log('公司picker发送选择改变，携带值为', e.detail.value)
				let d = JSON.parse(JSON.stringify(this.formArgs))
				this.companyIndex = e.detail.value
				d.branch_number = this.companyArray[this.companyIndex].number ? this.companyArray[this.companyIndex].number : ''
				d.branch_staff = this.companyArray[this.companyIndex].person ? this.companyArray[this.companyIndex].person : ''
				// this.formArgs =user_id = this.companyArray[this.companyIndex].id 
				d.sub_comp_id = this.companyArray[this.companyIndex].id  
				this.formArgs = d
				console.log(d)
				this.departmentIndex = -1
				this.positionIndex = -1
				this.fetchDepartment(this.formArgs.sub_comp_id)
				
				//console.log(this.formArgs)
			},
			//选择性别
			sexPickerChange (e) {
				console.log('性别picker发送选择改变，携带值为', e.detail.value)
				this.sexIndex = e.detail.value
			},
			//选择民族
			nationPickerChange (e) {
				console.log('民族picker发送选择改变，携带值为', e.detail.value)
				this.nationIndex = e.detail.value
			},
			//身份证到期时间
			expireIdCardDateChange (e) {
			    this.expireIdCardDate = e.detail.value
			},
			//出生日期
			birthDateChange (e) {
				this.birthDate = e.detail.value
			},
			//选择政治面貌
			politicalPickerChange (e) {
				console.log('政治面貌picker发送选择改变，携带值为', e.detail.value)
				this.politicalIndex = e.detail.value
			},
			//选择婚姻状况
			marriagePickerChange (e) {
				console.log('婚姻状况picker发送选择改变，携带值为', e.detail.value)
				this.marriageIndex = e.detail.value
			},
			//选择籍贯省份
			nativeProvincePickerChange (e) {
				console.log('籍贯省份picker发送选择改变，携带值为', e.detail.value)
				this.nativeProvinceIndex = e.detail.value
				let id = this.nativeProvinceArray[this.nativeProvinceIndex].id
				this.nativeCityIndex = -1
				this.fetchCityList(id,'nativeCity')
			},
			//选择籍贯市
			nativeCityPickerChange (e) {
				console.log('籍贯市picker发送选择改变，携带值为', e.detail.value)
				this.nativeCityIndex = e.detail.value
			},
			//选择户籍省
			domicileProvincePickerChange (e) {
				console.log('户籍省picker发送选择改变，携带值为', e.detail.value)
				this.domicileProvinceIndex = e.detail.value
				let id = this.domicileProvinceArray[this.domicileProvinceIndex].id
				this.domicileCityIndex = -1
				this.domicileDistrictIndex = -1
				this.domicileDistrictArray = []
				this.fetchCityList(id,'domicileCity')
			},
			//选择户籍市
			domicileCityPickerChange (e) {
				console.log('户籍市picker发送选择改变，携带值为', e.detail.value)
				this.domicileCityIndex = e.detail.value
				let id = this.domicileCityArray[this.domicileCityIndex].id
				this.domicileDistrictIndex = -1
				this.fetchCityList(id,'domicileDistrict')
			},
			//选择户籍区
			domicileDistrictPickerChange (e) {
				console.log('户籍区picker发送选择改变，携带值为', e.detail.value)
				this.domicileDistrictIndex = e.detail.value
			},
			//选择现在所在省
			nowProvincePickerChange (e) {
				console.log('所在省picker发送选择改变，携带值为', e.detail.value)
				this.nowProvinceIndex = e.detail.value
				let id = this.nowProvinceArray[this.nowProvinceIndex].id
				this.nowCityIndex = -1
				this.nowDistrictIndex = -1
				this.nowDistrictArray = []
				this.fetchCityList(id,'nowCity')
			},
			//选择现在所在市
			nowCityPickerChange (e) {
				console.log('所在市picker发送选择改变，携带值为', e.detail.value)
				this.nowCityIndex = e.detail.value
				let id = this.nowCityArray[this.nowCityIndex].id
				this.nowDistrictIndex = -1
				this.fetchCityList(id,'nowDistrict')
			},
			//选择现在所在区
			nowDistrictPickerChange (e) {
				console.log('所在区picker发送选择改变，携带值为', e.detail.value)
				this.nowDistrictIndex = e.detail.value
			},
			//退伍
			vetePickerChange (e) {
				console.log('退伍picker发送选择改变，携带值为', e.detail.value)
				this.veteIndex = e.detail.value
			},
			//学历
			educationPickerChange (e) {
				console.log('学历picker发送选择改变，携带值为', e.detail.value)
				this.educationIndex = e.detail.value
			},
			//英语
			englishPickerChange (e) {
				console.log('英语picker发送选择改变，携带值为', e.detail.value)
				this.englishIndex = e.detail.value
			},
			//是否曾在本公司工作
			workedPickerChange (e) {
				console.log('否曾在本公司工作picker发送选择改变，携带值为', e.detail.value)
				this.workedIndex = e.detail.value
			},
			//曾公司工作起始时间
			comWorkStartDate (e) {
				this.isComWorkStartDate = e.detail.value
			},
			//曾公司工作结束时间
			comWorkEndDate (e) {
				this.isComWorkEndDate = e.detail.value
			},
			//是否与其他单位解除劳动关系
			freePickerChange (e) {
				console.log('是否与其他单位解除劳动关系picker发送选择改变，携带值为', e.detail.value)
				this.freeIndex = e.detail.value
			},
			//解除时间
			secureDateChange (e) {
				this.secureDate = e.detail.value
			},
			//合同类型
			contractTypePickerChange (e) {
				console.log('合同类型picker发送选择改变，携带值为', e.detail.value)
				this.contractTypeIndex = e.detail.value
			},
			//部门
			departmentPickerChange (e) {
				console.log('部门picker发送选择改变，携带值为', e.detail.value)
				this.departmentIndex = e.detail.value
			},
			positionPickerChange (e) {
				//console.log('部门picker发送选择改变，携带值为', e.detail.value)
				this.positionIndex = e.detail.value
			},
			//关系
			relationPickerChange (e) {
				console.log('关系picker发送选择改变，携带值为', e.detail.value)
				this.relationIndex = e.detail.value
			},
			handleStanding () {
				if (!this.formArgs.id_number)	return this.$utils.showToast('请输入身份证号')
				if(!this.$utils.isIdCard(this.formArgs.id_number)) return this.$utils.showToast('身份证号有误')
				if (!this.formArgs.name)	return this.$utils.showToast('请输入姓名')
				this.handleChooseFile('standing')	
			},
			//选择文件文件
			async handleChooseFile (type) {
				//alert(12333333333333333333)
				//uni.showLoading()
				try {
					const data = await this.handleLoadingFile(type)
					//alert(JSON.stringify(data))
					let fileUrl = ''
					if (type === 'standing') { 
						const response = await this.handleUploadFile(data[0])
						//alert(JSON.stringify(response))
						const d = JSON.parse(response.data)
						fileUrl = d.data
					} else {
						const response = await this.handleUploadFiles(data[0])
						const d = JSON.parse(response.data)
						fileUrl = d.data
					}
					
					//console.log(fileUrl)
					this.hanleUploadSetVal(fileUrl,type)
				} catch (e) {
					//alert(JSON.stringify(e))
					uni.hideLoading()
					this.$utils.showToast(e)
				}	
			},
			hanleUploadSetVal (data,type) {
				uni.hideLoading()
				switch (type) {
					case 'cardFront': 
						this.sfz_front = data
						return 
					case 'cardReverse':
						this.sfz_back = data
						return
					case 'healthForm':
						this.health_form =this.health_form&&this.health_form!=''? this.health_form+','+data: data
						return 
					case 'noCrime':
						this.no_crime_prove = data
						return 
					case 'staffProve':
						this.staff_prove = data
						return 
					case 'diploma':
						this.diploma = data
						return 
					case 'permit':
						this.permit = data
						return 
					case 'standing':
						this.handleStandIdentify(data)
						return 
					default:
						return 
				}
			},
			async handleUploadFile (file) {
				console.log(file)
				return new Promise((resolve,reject) => {
					uni.uploadFile({
							url: config.baseUrl + '/api/xilujob.staffs_info/upload',
							// filePath: file,
							file: file,
							header: {
								//token: this.userInfo.token 
							},
							name: 'image',
							success: (uploadFileRes) => {
								resolve(uploadFileRes)
							},
							fail: (e) => {
								this.$utils.showToast('上传文件失败')
								reject(e)	
							}
					});
				})
			},
			async handleUploadFiles (file) {
				console.log(file)
				return new Promise((resolve,reject) => {
					uni.uploadFile({
							url: config.baseUrl + '/api/xilujob.staffs_info/upload',
							filePath: file,
							//file: file,
							header: {
								//token: this.userInfo.token 
							},
							name: 'image',
							success: (uploadFileRes) => {
								resolve(uploadFileRes)
							},
							fail: (e) => {
								this.$utils.showToast('上传文件失败')
								reject(e)	
							}
					});
				})
			},
			handleLoadingFile (type) {
				let sourceType =  ['album','camera']
				if (type === 'standing') { 
					sourceType =  ['camera']
				}
				return new Promise((resolve,reject) => {
					uni.chooseImage({
					  count: 1,
					  sourceType: sourceType,
					  success: async (res) => {
						 // alert(JSON.stringify(res))
					    // tempFilePath可以作为img标签的src属性显示图片
						let { tempFilePaths, tempFiles } = res
						// for (let { size } of tempFiles) {
						// 	if (size > 15728640) {
						// 		this.$utils.showToast('请上传小于30M的文件')
						// 		reject('请上传小于30M的文件')
						// 		break
						// 	}
						// }
						if (type === 'standing') {
							const response = await this.handleImgCompress(tempFilePaths[0])
							// alert(123123123)
							return resolve([response])
						}
						resolve(tempFilePaths)
					  },
					  fail: () => {
						  uni.hideLoading()
					  },
					  complete: () => {
						  uni.hideLoading()
					  }
					})
				})
			},
			handleImgCompress (url) {
				//alert(url)
				return new Promise ((resolve,reject) => {
						 this.$refs.wCompress.start(url, {
							pixels: 100000,  // 最大分辨率，默认二百万
							quality: 0.1,     // 压缩质量，默认0.8
							type: 'png',      // 图片类型，默认jpg
							base64: false,     // 是否返回base64，默认false，非H5有效
						  })
						  .then(res => {
							//alert(123123213)
							resolve(res)
						  })
						  .catch(e => {
							  //alert(2323232)
							console.log(e)
							 reject(e)
				           })
				})
			},
			async fetchCompanyList  () {
				if(!this.$route.query.id) return 
				try {
					const response = await this.$api.fetchCompanyList({
						id: this.$route.query.id
					})
					console.log(response)
					this.companyArray = response.data
				} catch (e) {
					console.log('comeponent staff(fetchCompanyList) error ->',e)
				}
			},
			//提交表单
			async handleSubmit () {
				// uni.showToast({
				// 	title: "提交成功",
				// 	icon: "success"
				// })
				if (!this.handleVerified()) return
				if (!this.$route.query.id) return 
				if (!this.isPersonal) return this.$utils.showToast('请进行身份识别')
				uni.showLoading()
				let {
				  nativeProvinceArray,
				  nativeCityArray,
				  nativeProvinceIndex,
				  nativeCityIndex,
				  domicileProvinceArray,
				  domicileProvinceIndex,
				  domicileCityArray,
				  domicileCityIndex,
				  domicileDistrictArray,
				  domicileDistrictIndex,
				  nowProvinceArray,  //现住址
				  nowProvinceIndex,
				  nowCityArray,
				  nowCityIndex,
			      nowDistrictArray,
				  nowDistrictIndex,
				} = this
				let np = `${nativeProvinceArray[nativeProvinceIndex].name}`
				let nc = `${nativeCityArray[nativeCityIndex].name}`
				let dp = `${domicileProvinceArray[domicileProvinceIndex].name}`
				let dc = `${domicileCityArray[domicileCityIndex].name}`
				let dd = `${domicileDistrictArray[domicileDistrictIndex].name}`
				let nowP = `${nowProvinceArray[nowProvinceIndex].name}`
				let nowC = `${nowCityArray[nowCityIndex].name}`
				let nowD = `${nowDistrictArray[nowDistrictIndex].name}`
				let rela = ''
				// console.log(this.positionArray[this.positionIndex].id,'1123456789')
				let staff_id = ''
				if (this.relationIndex === 5) {
					rela = this.contacts_relation
				} else {
					rela = this.relationArray[this.relationIndex].value
				}
				let params = {
					user_id: this.$route.query.id,
					due_time: this.expireIdCardDate,
					sex: this.sexArray[this.sexIndex].id,
					nation: this.nationData[this.nationIndex].name,
					birthday: this.birthDate,
					politics_status: this.politicalArray[this.politicalIndex].id,
					marriage_status: this.marriageArray[this.marriageIndex].id,
					native_place: `${np} ${nc}`,
					domicile_address: `${dp} ${dc} ${dd}`,
					current_address: `${nowP} ${nowC} ${nowD}`,
					phone: this.phone,
					retire_status: this.veteArray[this.veteIndex].id,
					education: this.educationArray[this.educationIndex].value,
					language_level: this.englishArray[this.englishIndex].value, 
					entry_status: this.workedArray[this.workedIndex].id,
					sub_comp: this.companyArray[this.companyIndex].nickname,
					contract_start: this.isComWorkStartDate,
					contract_end: this.isComWorkEndDate,
					work_status: this.freeArray[this.freeIndex].id,
					remove_date: this.secureDate,
					contract_types: this.contractTypeArray[this.contractTypeIndex].id,
					depar: this.departmentArray[this.departmentIndex].id,
					job_title: this.positionArray[this.positionIndex].id,
					contacts_relation: rela,
					sfz_front: this.sfz_front,
					health_form: this.health_form,
					no_crime_prove: this.no_crime_prove,
					staff_prove: this.staff_prove,
					diploma: this.diploma,
					permit: this.permit,
					sfz_back: this.sfz_back,
					other_documents: JSON.stringify(this.activeArgs),
					native_province: nativeProvinceArray[nativeProvinceIndex].id,
					native_city: nativeCityArray[nativeCityIndex].id,
					domicile_province: domicileProvinceArray[domicileProvinceIndex].id,
					domicile_city: domicileCityArray[domicileCityIndex].id,
					domicile_district: domicileDistrictArray[domicileDistrictIndex].id,
					current_province: nowProvinceArray[nowProvinceIndex].id,
					current_city: nowCityArray[nowCityIndex].id,
					current_district: nowDistrictArray[nowDistrictIndex].id,
					...this.formArgs
				}
				if (this.$route.query.staff_id) {
					params.id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id) {
					params.id = this.userInfo.staff_id
				}
				console.log(params)
				try {
					const response = await this.$api.handleAddStaff(params)
					this.setUserInfo(response.data)
					uni.hideLoading()
					this.$emit('next',1)
					uni.showToast({
						title: "提交成功,请填写下一项",
						icon: "success"
					})
					
				} catch (e) {
					console.log('comeponent staff(handleSubmit) error ->',e)
					uni.hideLoading()
				}	
			},
			async fetchFamily () {
				let params = {}
				if (this.$route.query.staff_id) {
					params.id = this.$route.query.staff_id
				} else if (this.userInfo.staff_id) {
					params.id = this.userInfo.staff_id
				}
				try {
					await this.fetchCompanyList()
					const response = await this.$api.fetchFamily(params)
					if (response.data.staff_info[0]) {
						await this.fetchDepartment(response.data.staff_info[0].sub_comp_id)
						this.staffArgs = response.data.staff_info[0]
						let d = JSON.parse(JSON.stringify(this.formArgs))
						Object.keys(d).forEach(item => {
							if (item !== 'captcha') {
								d[item] = this.staffArgs[item] 
							}
						})
						this.formArgs = d
						let {
							phone,
							due_time,
							sex,
							nation,
							birthday,
							politics_status,
							marriage_status,
							native_province,
							native_city,
							domicile_province,
							domicile_city,
							domicile_district,
							current_province,
							current_city,
							current_district,
							retire_status,
							education,
							language_level,
							entry_status,
							contract_start,
							contract_end,
							work_status,
							remove_date,
							contract_types,
							depar,
							contacts_relation,
							sfz_front,
							sfz_back,
							health_form,
							no_crime_prove,
							staff_prove,
							diploma,
							permit,
							other_documents,
							sub_comp,
							job_title,
						} = this.staffArgs
						this.phone = phone
						this.expireIdCardDate = due_time
						this.sexIndex = this.$utils.handleKeyFilter(this.sexArray,'id',sex)
						this.nationIndex = this.$utils.handleKeyFilter(this.nationData,'name',nation)
						this.companyIndex =  this.$utils.handleKeyFilter(this.companyArray,'nickname',sub_comp)
						this.birthDate = birthday
						this.politicalIndex = this.$utils.handleKeyFilter(this.politicalArray,'id',politics_status)
						this.marriageIndex = this.$utils.handleKeyFilter(this.marriageArray,'id',marriage_status)
						this.nativeProvinceIndex = this.$utils.handleKeyFilter(this.nativeProvinceArray,'id',native_province)
						await this.fetchCityList(native_province,'nativeCity')
						this.nativeCityIndex = this.$utils.handleKeyFilter(this.nativeCityArray,'id',native_city)
						this.domicileProvinceIndex = this.$utils.handleKeyFilter(this.domicileProvinceArray,'id',domicile_province)
						await this.fetchCityList(domicile_province,'domicileCity')
						this.domicileCityIndex = this.$utils.handleKeyFilter(this.domicileCityArray,'id',domicile_city)
						await this.fetchCityList(domicile_city,'domicileDistrict')
						this.domicileDistrictIndex = this.$utils.handleKeyFilter(this.domicileDistrictArray,'id',domicile_district)
						this.nowProvinceIndex = this.$utils.handleKeyFilter(this.nowProvinceArray,'id',current_province)
						await this.fetchCityList(current_province,'nowCity')
						this.nowCityIndex = this.$utils.handleKeyFilter(this.nowCityArray,'id',current_city)
						await this.fetchCityList(current_city,'nowDistrict')
						this.nowDistrictIndex = this.$utils.handleKeyFilter(this.nowDistrictArray,'id',current_district)
						this.veteIndex = this.$utils.handleKeyFilter(this.veteArray,'id',retire_status)
						this.educationIndex = this.$utils.handleKeyFilter(this.educationArray,'value',education)
						this.englishIndex = this.$utils.handleKeyFilter(this.englishArray,'value',language_level)
						this.workedIndex = this.$utils.handleKeyFilter(this.workedArray,'id',entry_status) 
						this.isComWorkStartDate = contract_start
						this.isComWorkEndDate = contract_end
						this.freeIndex = this.$utils.handleKeyFilter(this.freeArray,'id',work_status)
						this.secureDate = remove_date
						this.contractTypeIndex = this.$utils.handleKeyFilter(this.contractTypeArray,'id',contract_types)
						this.departmentIndex = this.$utils.handleKeyFilter(this.departmentArray,'id',parseInt(depar))
						this.positionIndex = this.$utils.handleKeyFilter(this.positionArray,'id',parseInt(job_title))
						console.log(this.positionIndex)
						this.relationIndex = this.$utils.handleKeyFilter(this.relationArray,'value',contacts_relation) 
						if (this.relationIndex === 5) {
						  this.contacts_relation = contacts_relation
						}
						this.sfz_front = sfz_front
						this.sfz_back = sfz_back
						this.health_form = health_form
						this.no_crime_prove = no_crime_prove
						this.staff_prove = staff_prove
						this.diploma = diploma
						this.permit = permit
						let other = other_documents.replace(/&quot;/g,"\"",)
						this.setActiveArgs(JSON.parse(other))
					}	
				} catch (e) {
					console.log('comeponent family(handleAddFamily) error ->',e)
				}
			},
			handleVerified () {
				let {
				  domicileProvinceIndex,
				  domicileCityIndex,
				  domicileDistrictIndex,
				  nowProvinceIndex,
				  nowCityIndex,
				  nowDistrictIndex,
				} = this
				if (this.companyIndex === -1) {
					this.$utils.showToast('输入所属公司')
					return false
				} 
				if (!this.formArgs.id_number) {
					this.$utils.showToast('输入身份证号')
					return false
				}
				
				if (!this.expireIdCardDate) {
					this.$utils.showToast('输入身份证到期日期')
					return false
				} 
				if (!this.formArgs.name) {
					this.$utils.showToast('输入姓名')
					return false
				}
				if (!this.formArgs.security_number) {
					this.$utils.showToast('输入保安证号')
					return false
				}
				if (this.sexIndex === -1) {
					this.$utils.showToast('请选择性别')
					return false
				}
				if (this.nationIndex === -1) {
					this.$utils.showToast('请选择民族')
					return false
				}
				if (!this.birthDate) {
					this.$utils.showToast('请选择出生日期')
					return false
				}
				if (!this.formArgs.age) {
					this.$utils.showToast('输入年龄')
					return false
				}
				if (!this.formArgs.stature) {
					this.$utils.showToast('输入身高')
					return false
				}
				if (this.politicalIndex === -1) {
					this.$utils.showToast('请选择政治面貌')
					return false
				}
				if (this.marriageIndex === -1) {
					this.$utils.showToast('请选择婚姻状况')
					return false
				}
				if (this.marriageIndex === -1) {
					this.$utils.showToast('请选择婚姻状况')
					return false
				}
				if (this.nativeProvinceIndex === -1 || this.nativeCityIndex === -1) {
					this.$utils.showToast('请选择籍贯')
					return false
				}
				if (domicileProvinceIndex === -1 || domicileCityIndex === -1 || domicileDistrictIndex === -1) {
					this.$utils.showToast('请选择户籍')
					return false
				}
				if (nowProvinceIndex === -1 || nowCityIndex === -1 || nowDistrictIndex === -1) {
					this.$utils.showToast('请选择现住址')
					return false
				}
				if (!this.formArgs.det_address) {
					this.$utils.showToast('输入户籍详细地址')
					return false
				}
				if (!this.formArgs.current) {
					this.$utils.showToast('输入现在详细地址')
					return false
				}
				if (!this.phone) {
					this.$utils.showToast('输入联系电话')
					return false
				}
				if (!this.formArgs.home_phone) {
					this.$utils.showToast('输入家庭电话')
					return false
				}
				if (this.veteIndex === -1) {
					this.$utils.showToast('请选择是否退伍')
					return false
				}
				if (this.educationIndex === -1) {
					this.$utils.showToast('请选择学历')
					return false
				}
				if (this.englishIndex === -1) {
					this.$utils.showToast('请选择外语水平')
					return false
				}
				if (!this.formArgs.school) {
					this.$utils.showToast('输入毕业学校')
					return false
				}
				if (!this.formArgs.major) {
					this.$utils.showToast('输入专业')
					return false
				}
				if (!this.formArgs.history) {
					this.$utils.showToast('输入家庭病史')
					return false
				}
				if (this.workedIndex === -1) {
					this.$utils.showToast('请选择外语水平')
					return false
				}
				if (this.workedIndex === 1) {
					if (!this.isComWorkStartDate) {
						this.$utils.showToast('请选择合同开始日期')
						return false
					}
					if (!this.isComWorkEndDate) {
						this.$utils.showToast('请选择合同结束日期')
						return false
					}
				}
				if (this.freeIndex === -1) {
					this.$utils.showToast('请选择是否解除合同')
					return false
				}
				if (this.freeIndex === -1) {
					this.$utils.showToast('请选择是否解除合同')
					return false
				}
				if (!this.secureDate) {
					this.$utils.showToast('请选择解除时间')
					return false
				}
				if (this.contractTypeIndex === -1) {
					this.$utils.showToast('请选择签署合同类型')
					return false
				}
				if (this.departmentIndex === -1) {
					this.$utils.showToast('请选择部门')
					return false
				}
				if (this.positionIndex === -1) {
					this.$utils.showToast('请选择职位')
					return false
				}
				// if (!this.formArgs.job_title) {
				// 	this.$utils.showToast('输入职位')
				// 	return false
				// }
				if (!this.formArgs.escort) {
					this.$utils.showToast('输入护卫点')
					return false
				}
				if (!this.formArgs.contacts) {
					this.$utils.showToast('输入紧急联系人')
					return false
				}
				if (this.relationIndex === -1) {
					this.$utils.showToast('请选择紧急联系人关系')
					return false
				}
				if (this.relationIndex === 5) {
					if (!this.contacts_relation) {
						this.$utils.showToast('请输入紧急联系人关系')
						return false
					}
				}
				if (!this.formArgs.contacts_phone) {
					this.$utils.showToast('输入紧急联系人电话')
					return false
				}
				if (!this.formArgs.contacts_unit) {
					this.$utils.showToast('输入紧急联系人工作单位')
					return false
				}
				if (!this.formArgs.contacts_address) {
					this.$utils.showToast('输入紧急联系人详细地址')
					return false
				}
				if (!this.formArgs.captcha) {
					this.$utils.showToast('输入手机验证码')
					return false
				}
				if (!this.sfz_front) {
					this.$utils.showToast('请上传身份证正面')
					return false
				}
				if (!this.sfz_back) {
					this.$utils.showToast('请上传身份证反面')
					return false
				}
				// if (!this.health_form) {
				// 	this.$utils.showToast('请上传体检表')
				// 	return false
				// }
				// if (!this.no_crime_prove) {
				// 	this.$utils.showToast('请上传无犯罪记录证明')
				// 	return false
				// }
				return true
			},
			handleToCert () {
				uni.navigateTo({
					url: '/pages/certificate/certificate'
				})
			},
			async handleCardInfo (path) {
				const response = await Client.main(path)
				console.log(response)
			},
			async handleStandIdentify (url) {
				//alert(url)
				console.log(url)
				try {
					const response = await this.$api.handleStandIdentify({
						image_url: url,
						id_card: this.formArgs.id_number,
						id_name: this.formArgs.name
					})
					//alert(JSON.stringify(response))
					console.log(JSON.stringify(response))
					if (response.data.incorrect !== 100 ) {
						this.$utils.showToast(response.data.msg)
					} else {
						this.isPersonal = true
						this.$utils.showToast(response.data.msg)
					}
				} catch (e) {
					console.log('comeponent staff(handleStandIdentify) error ->',e)
				}
			},
			//所属公司
			async fetchDepartment (id) {
				try {
					
						const response = await this.$api.fetchDepartment({
							id
						})
						// console.log(response)
						this.departmentArray = response.data.depar
						this.positionArray = response.data.position
				} catch (e) {
					console.log('comeponent staff(fetchAreaList) error ->',e)
				}
			},
			//获取省
			async fetchAreaList () {
				try {
					const response = await this.$api.fetchAreaList({
						pid: 0
					})
					this.nativeProvinceArray = response.data
					this.domicileProvinceArray = response.data
					this.nowProvinceArray = response.data
				} catch (e) {
					console.log('comeponent staff(fetchAreaList) error ->',e)
				}
			},
			//获取城市区
			async fetchCityList (id,type) {
				try {
					const response = await this.$api.fetchAreaList({
						pid: id
					})
					switch (type) {
						case 'nativeCity':
							this.nativeCityArray = response.data
							return 
						case 'domicileCity':
							this.domicileCityArray = response.data
							return
						case 'domicileDistrict':
							this.domicileDistrictArray = response.data
							return 
						case 'nowCity':
							this.nowCityArray = response.data
							return
						case 'nowDistrict':
							this.nowDistrictArray = response.data
							return 
						default:
							return 
					}
				} catch (e) {
					console.log('comeponent staff(fetchCityList) error ->',e)
				}
			}
		}
	}
</script>

<style lang="scss">
.center-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.container {
	padding: 0rpx 50rpx 0 50rpx;
	width: 100%;
	box-sizing: border-box;
	.header-wrapper {
		margin-bottom: 17rpx;
		.header-title {
			font-size: 30rpx;
			color: #808080;
			padding: 17rpx 0;
			border-bottom: 1rpx dashed #808080;
			margin-bottom: 15rpx;
		}
		.header-text {
			font-size: 26rpx;
			color: #808080;
			line-height: 28rpx;
			background-clip: text;
			text-fill-color: transparent;
		}
	}
	.submit-btn-wrapper {
		padding: 50rpx 0 50rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
		.submit-btn {
			width: 221rpx;
			line-height: 80rpx;
			background: #005AFF;
			border-radius: 3rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			text-align: center;
		}
		.btn-click {
			background: #739cd7;
		}
	}
	.staff-form {
		
		width: 100%;
		.flex-1 {
			flex: 1
		}
		.staff-item {
			.card-btn {
				width: 100%;
				height: 70rpx;
				background: #2D83FE;
				font-size: 30rpx;
				color: #FFFFFF;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				.btn-text-s {
					font-size: 30rpx;
				}
				.btn-text-t {
					font-size: 26rpx;
				}
			}
			.btn-click {
				background: #739cd7;
			}
			.hide {
				opacity: 0;
				visibility:hidden;
			}
			.staff-item-title{
				font-size: 30rpx;
				padding: 26rpx 0;
				.dot {
					color:#FF0000
				}
				.title-text {
					color: #676767;
				}
			}
			.upload-bg {
				background: #ECECEC;
				border: none !important;
				font-size: 30rpx;
				color: #646464 !important;
				justify-content: center;
				
			}
			.annex-box {
				padding: 2rpx 0;
				display: flex;
				align-items: center;
				.annex-icon {
					margin-right: 5rpx;
				}
				.annex-text {
					font-size: 24rpx;
					color: #005AFF;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					width: 580rpx;
				}
			}
			.staff-inp {
				width: 100%;
				height: 70rpx;
				border-radius: 3rpx;
				border: 1rpx solid #D3D3D3;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				
				.company-icons {
					margin: 0 20rpx;
				}
				.company-wrapper {
					width: 100%;
					.company-name {
						width: 100%;
						height: 50rpx;
						display: flex;
						align-items: center;
						font-size: 30rpx;
						color: #676767;
					}
					.company-name-tip {
						@extend .company-name;
						color: #979797;
						
					}
				}
				.inp-box {
					width: 100%;
					height: 70rpx;
					font-size: 30rpx;
					color: #676767;
					padding: 0 20rpx;
					box-sizing: border-box;
				}
				.place-holder-s {
					line-height: 70rpx;
					color: #979797;	
				}
				.disabled {
					background: #ECECEC;
				}
				.card-btn {
					width: 300rpx;
					height: 70rpx;
					background: #2D83FE;
					font-size: 30rpx;
					color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.btn-text-s {
						font-size: 30rpx;
					}
					.btn-text-t {
						font-size: 26rpx;
					}
				}
				.btn-click {
					background: #739cd7;
				}
				
				
			}
			.code-inp {
				width: 100%;
				height: 70rpx;
				border-radius: 3rpx;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				justify-content: space-between; 	
				.inp-code-box {
					width: 452rpx;
					height: 70rpx;
					font-size: 30rpx;
					color: #676767;
					padding: 0 20rpx;
					box-sizing: border-box;
					border: 1rpx solid #D3D3D3;
				}
				.place-holder-s {
					line-height: 70rpx;
					color: #979797;	
				}
				.code-btn {
					width: 170rpx;
					line-height: 70rpx;
					background: #2D83FE;
					border-radius: 3rpx;
				    font-size: 30rpx;
					color: #fff;
					text-align: center;
				}
				.code-btn-down {
					background: #739cd7;
				}
				.btn-click {
					background: #739cd7;
				}
			}
			
			
			
			
		}
		
		.staff-row {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.staff-item {
				box-sizing: border-box;
				width: 312rpx;
			}
			.bottom-icons {
				position: absolute;
				right: 20rpx;
				z-index: -1;
			}
		}
	}
	
}
</style>